import React, { useEffect, useState } from 'react'
import { ArrowLeft } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom';
import { Tabs } from 'react-vant'
import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:3000'
export default function Image() {
  const navigate = useNavigate()
  const [data, setData] = useState([])
  const [inquiry, setInquiry] = useState([])
  const _id='66d12d214bfeba3e1495ecdf'
  useEffect(() => {
    getlist()
    getlists()
  }, [])
  const getlist = async () => {
    let { data: { data } } = await axios.get('/getstatus')
    setData(data)
  }
  const getlists = async () => {
    let { data: { data } } = await axios.get('/getinquiry')
    setInquiry(data)
  }
  return (
    <div>
      <p style={{ padding: '7px', width: '100%', lineHeight: '40px', display: 'flex', alignItems: 'center', fontSize: '23px', borderBottom: '1px solid #CECECE' }}> <ArrowLeft onClick={() => { navigate("/home") }} />视频问诊</p>
      <Tabs defaultActive={1} color='#0079FE' lineWidth='100px' >
        {data.map(item => (
          <Tabs.TabPane titleStyle={{ fontSize: '15px' }} key={item._id} title={`${item.name}`}>
            {
             (inquiry.filter(i => i.sid._id === item._id&&i.wid._id === _id)).map(z => {
                return <div key={z._id}  onClick={()=>{navigate(`/details/${z._id}`)}}>
                  <div style={{ width: '90%', margin: '0 auto',borderBottom: '1px solid #CECECE', padding: '10px 0' }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-around' }} >
                      <img src="./10.png" alt="" />
                      <span>{z.name}</span>
                      <span style={{ fontSize: '12px', color: '#9999A6' }}>{z.sex}</span>
                      <span style={{ fontSize: '12px', color: '#9999A6' }}>{z.age}</span>
                      <button style={{ border: '0', background: '#EDF0FD', fontSize: '13px', padding: '10px' }}>{z.wid.way}</button>
                      <span style={{ color: 'red' }}>{z.sid.name}</span>
                    </div>
                    <p style={{ margin: '0 auto', marginTop: '10px', marginLeft: '10px', color: '#9999A6', fontSize: '15px', lineHeight: '20px' }}>病情描述：
                      <span style={{ marginLeft: '10px' }} >{z.content}</span>
                    </p>
                  </div>
                  <p style={{ color: '9999A6', display: 'flex', justifyContent: 'flex-end', marginRight: '20px' }}>20分钟前</p>
                </div>
              })
            }
      </Tabs.TabPane>
        ))}
    </Tabs>
    </div >
  )
}
